<template>
	<view class="active">
		<van-nav-bar title="关于" left-arrow @click-left="onClickLeft" />
		<view class="headImg">
			<text>科技向善  诸事安好</text>
		</view>
		<!-- 里面是功能列表 -->
		<view class="mainInfo" v-for="(item,index) in navList" :key=index @tap="pageList(index)">
			<van-icon class="icon1" :name="item.icon1" :color="item.col" />
				<text>{{item.msg}}</text>
			<van-icon class="icon2" name="item.icon2" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navList:[{msg:"版本号",icon1:"diamond-o",icon2:"arrow",col:"#75c857",puth:"./version/version"},
				        {msg:"使用帮助",icon1:"question-o",icon2:"arrow",col:"#c89f4d",puth:"./help/help"},
				        {msg:"隐私政策",icon1:"browsing-history-o",icon2:"arrow",col:"#c87285",puth:"./privacy/privacy"},
				        {msg:"软件许可及服务协议",icon1:"comment-circle-o",icon2:"arrow",col:"#499cc8",puth:"./agreement/agreement"}],
			}
		},
		methods: {
			onClickLeft () {
				uni.navigateBack({
					delte:1
				})
			},
			pageList(index) {
				console.log(this.navList[index])
				uni.navigateTo({url:this.navList[index].puth})
			}
		}
	}
</script>

<style>
	body {
		background-color: #f0f0f0;
	}
	.headImg {
		width: 100%;
		height: 320upx;
		background-color: #007AFF;
		text-align: center;
		position: relative;
	}
	.headImg image {
		width: 100%;
	}
	.headImg text {
		font-size: 22px;
		color: #ffffff;
		position: absolute;
		top: 45%;
		left: 50%;
		transform: translate(-50%,-50%);
		
		
	}
	.mainInfo {
		width: 100%;
		height: 90upx;
		background-color: #fff;
		margin-top: 6upx;
	}
	.mainInfo van-icon {
		vertical-align: middle;
		
	}
	.mainInfo text {
		line-height: 90upx;
	}
	.icon1 {
		margin: 0 30upx;
	}
	.icon2 {
		float: right;
		margin: 33upx 50upx 30upx 0;
	}
</style>
